<template>
  <a-popover
      trigger="contextmenu"
      v-model:visible="visible"
      :overlayClassName="`${prefixCls}-popover`"
      :placement="position">
    <template #title>
      <span>{{ title }}</span>
      <span style="float: right" title="关闭">
        <Icon icon="ant-design:close-outlined" @click="visible = false"/>
      </span>
    </template>
    <template #content>
      <a-textarea
          ref="textareaRef"
          :value="innerValue"
          :disabled="disabled"
          :style="textareaStyle"
          v-bind="attrs"
          @input="onInputChange"/>
    </template>
    <a-input
        :class="`${prefixCls}-input`"
        :value="innerValue"
        :disabled="disabled"
        v-bind="attrs"
        @change="onInputChange">
      <template #suffix>
        <Icon icon="ant-design:fullscreen-outlined" @click.stop="onShowPopup"/>
      </template>
    </a-input>
  </a-popover>
</template>

<script lang="ts" setup>
import { computed, nextTick, ref, watch } from 'vue'
import Icon from '/@/components/Icon/src/Icon.vue'
import { useAttrs } from '/@/hooks/core/useAttrs'
import { propTypes } from '/@/utils/propTypes'
import { useDesign } from '/@/hooks/web/useDesign'

const { prefixCls } = useDesign('j-input-popup')
const props = defineProps({
  // v-model:value
  value: propTypes.string.def(''),
  title: propTypes.string.def(''),
  // 弹出框显示位置
  position: propTypes.string.def('right'),
  width: propTypes.number.def(300),
  height: propTypes.number.def(150),
  disabled: propTypes.bool.def(false),
  // 弹出框挂载的元素ID
  popContainer: propTypes.string.def(''),
})
const attrs = useAttrs()
const emit = defineEmits(['change', 'update:value'])

const visible = ref<boolean>(false)
const innerValue = ref<string>('')
// textarea ref对象
const textareaRef = ref()
// textarea 样式
const textareaStyle = computed(() => ({
  height: `${props.height}px`,
  width: `${props.width}px`,
}))

watch(() => props.value, (value) => {
  if (value && value.length > 0) {
    innerValue.value = value
  }
}, { immediate: true })


function onInputChange(event) {
  innerValue.value = event.target.value
  emitValue(innerValue.value)
}

async function onShowPopup() {
  visible.value = true
  await nextTick()
  textareaRef.value?.focus()
}

// 获取弹出框挂载的元素
function getPopupContainer(node) {
  if (!props.popContainer) {
    return node.parentNode
  } else {
    return document.getElementById(props.popContainer)
  }
}

function emitValue(value) {
  emit('change', value)
  emit('update:value', value)
}
</script>

<style lang="less">
//noinspection LessUnresolvedVariable
@prefix-cls: ~'@{namespace}-j-input-popup';

.@{prefix-cls} {
  &-popover {
  }

  &-input {
    .app-iconify {
      cursor: pointer;
      color: #666666;
      transition: color 0.3s;

      &:hover {
        color: black;
      }
    }
  }
}
</style>